<template>
  <div class="lum-dialog-mask">
    <div
      class="container animated bounceInDown"
      :class="{ 'full-screen': isFullScreen }"
    >
      <el-container class="full-height">
        <el-header class="header no-padding" height="50px">
          <div class="tools">
            <span>选择编程语言:&nbsp;&nbsp;</span>
            <el-select
              v-model="language"
              size="small"
              filterable
              placeholder="语言类型"
              :disabled="!editMode"
            >
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <el-icon class="close-btn" @click="close"><ele-Close /></el-icon>
          <i
            class="iconfont icon-full-screen"
            :class="{
              'icon-tuichuquanping': isFullScreen,
              'icon-fullscreen ': !isFullScreen,
            }"
            :title="isFullScreen ? '关闭全屏模式' : '打开全屏模式'"
            @click="isFullScreen = !isFullScreen"
          />
        </el-header>

        <el-main class="main no-padding">
          <!-- :language="language" -->
          <PrismEditor
            class="peditor"
            style="border-radius: 0"
            v-model="code"
            line-numbers
            :highlight="highlighter"
          />
        </el-main>

        <el-footer class="footer no-padding" height="50px">
          <div class="code-num">
            <span>文字总数：{{ code.length }}个字</span>
            <span v-show="code.length > 10000 && editMode" class="code-warning">
              (字数不能超过10000字)
            </span>
          </div>

          <div class="buttom-group">
            <el-button size="small" plain @click="close">
              {{ editMode ? '取消编辑' : '关闭预览' }}
            </el-button>

            <el-button
              v-show="editMode"
              type="primary"
              size="small"
              @click="submit"
              >发送代码
            </el-button>
          </div>
        </el-footer>
      </el-container>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from 'vue';
import { PrismEditor } from 'vue-prism-editor';
import { languages, highlight } from 'prismjs/components/prism-core';
import 'vue-prism-editor/dist/prismeditor.min.css';
import 'prismjs/components/prism-clike';
import 'prismjs/components/prism-javascript';
import 'prismjs/themes/prism-tomorrow.css';
import { ElMessage } from 'element-plus'

export default {
    name: 'TalkCodeBlock',
    components: {
      PrismEditor,
    },
    props: {
        loadCode: {
            type: String,
            default: '',
        },
        loadLang: {
            type: String,
            default: '',
        },
        editMode: {
            type: Boolean,
            default: false,
        }
    },
    setup(props, context) {
        const { loadCode, loadLang } = toRefs(props)
        const state = reactive({
            language: '',
            code: '',
            options: [
                {
                    value: 'css',
                    label: 'CSS',
                },
                {
                    value: 'less',
                    label: 'Less',
                },
                {
                    value: 'scss',
                    label: 'Scss',
                },
                {
                    value: 'javascript',
                    label: 'JavaScript',
                },
                {
                    value: 'typescript',
                    label: 'TypeScript',
                },
                {
                    value: 'json',
                    label: 'JSON',
                },
                {
                    value: 'bash',
                    label: 'BASH',
                },
                {
                    value: 'c',
                    label: 'C',
                },
                {
                    value: 'docker',
                    label: 'Docker',
                },
                {
                    value: 'git',
                    label: 'Git',
                },
                {
                    value: 'go',
                    label: 'Golang',
                },
                {
                    value: 'java',
                    label: 'Java',
                },
                {
                    value: 'lua',
                    label: 'Lua',
                },
                {
                    value: 'nginx',
                    label: 'Nginx',
                },
                {
                    value: 'objectivec',
                    label: 'Objective-C',
                },
                {
                    value: 'php',
                    label: 'PHP',
                },
                {
                    value: 'python',
                    label: 'Python',
                },
                {
                    value: 'ruby',
                    label: 'Ruby',
                },
                {
                    value: 'rust',
                    label: 'Rust',
                },
                {
                    value: 'sql',
                    label: 'Sql',
                },
                {
                    value: 'swift',
                    label: 'Swift',
                },
                {
                    value: 'vim',
                    label: 'vim',
                },
                {
                    value: 'visual-basic',
                    label: 'visual-basic',
                },
                {
                    value: 'shell',
                    label: 'Shell',
                }
            ],
            isFullScreen: false
        })
        const submit = () => {
            if (!state.code) {
                ElMessage.error('代码块不能为空...')
                return false
            }
            if (state.language == '') {
                ElMessage.error('请选择语言类型...')
                return false
            }
            if (state.code.length > 10000) {
                ElMessage.error('代码字数不能超过10000字！！！')
                return false
            }
            context.emit('confirm', {
                language: state.language,
                code: state.code,
            })
        }
        const close = () => {
            context.emit('close')
        }
        const highlighter = (code) => {
            return highlight(code, languages.js);
        }
        onMounted(() => {
            state.code = loadCode.value
            state.language = loadLang.value
        })
        watch(() => loadCode.value,
            val => {
                state.code = val
            }
        )
        watch(() => loadLang.value,
            val => {
                state.language = val
            }
        )
        return {
            ...toRefs(state),
            languages,
            submit,
            close,
            highlighter
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
  width: 80%;
  max-width: 800px;
  height: 600px;
  overflow: hidden;
  box-shadow: 0 2px 8px 0 rgba(31, 35, 41, 0.2);
  transition: 0.5s ease;
  background: #2d2d2d;
  border-radius: 5px;

  .header {
    position: relative;
    background-color: white;

    .close-btn {
      position: absolute;
      right: 12px;
      top: 13px;
      font-size: 24px;
      cursor: pointer;
    }

    .icon-full-screen {
      position: absolute;
      right: 45px;
      top: 13px;
      font-size: 20px;
      cursor: pointer;
    }

    .tools {
      line-height: 50px;
      padding-left: 10px;
    }
  }

  .footer {
    background-color: #3c3c3c;
    padding-right: 20px;
    line-height: 50px;

    .code-num {
      float: left;
      color: white;
      padding-left: 10px;
      font-size: 14px;
    }

    .code-warning {
      color: red;
    }

    .buttom-group {
      float: right;
      height: 100%;
      line-height: 50px;
      text-align: right;
    }
  }
}

.full-screen {
  width: 100%;
  height: 100%;
  max-width: 100%;
}

:deep(.el-input__inner)  {
  border-radius: 0;
  width: 130px;
}

:deep(pre)  {
  border-radius: 0;
}

:deep(.prism-editor-wrapper pre::-webkit-scrollbar)  {
  background-color: #272822;
}

:deep(.prism-editor-wrapper pre::-webkit-scrollbar-thumb)  {
  background-color: #41413f;
  cursor: pointer;
}

:deep(.prism-editor-wrapper::-webkit-scrollbar)  {
  background-color: #272822;
}

:deep(.prism-editor-wrapper::-webkit-scrollbar-thumb)  {
  background-color: rgb(114, 112, 112);
  cursor: pointer;
}
</style>